@charset 'UTF-8';

@import 'compass/utilities';
@import 'compass/css3';
@import 'utils/module';

.Separator {
    height: 2em;
    margin: 0;
    position: relative;
    text-align: center;
    z-index: 0;
    pointer-events: none;

    z-index: 1;
    height: 1px;
    margin-bottom: 1em;
    margin-top: -1em;

    &:before,
    &:after {
        content: '';
        display: none;
        height: 1em;
        left: 0;
        position: absolute;
        width: 100%;
    }

    &:before {
        bottom: 0;
    }

    &:after {
        top: 0;
    }

    &.hovered--after {
        &:before {
            background: #f5f5f5;
            display: block;
        }
    }

    &.hovered--before {
        &:after {
            background: #f5f5f5;
            display: block;
        }
    }

    .separator__hr {
        border-top: 1px solid v(center-channel-color-20);
        margin: 0;
        position: relative;
        top: 1em;
        z-index: 5;
    }

    .separator__text {
        @include border-radius(50px);
        background: v(center-channel-bg);
        color: v(center-channel-color);
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        line-height: 2em;
        padding: 0 1em;
        position: relative;
        z-index: 5;
    }
}

@media screen and (max-width: 1440px) {
    .Separator {
        &.hovered--comment {
            &:before,
            &:after {
                background: none !important;
            }
        }
    }
}


@media screen and (max-width: 768px) {
    .Separator {
        &.hovered--after {
            &:before {
                background: none;
            }
        }

        &.hovered--before {
            &:after {
                background: none;
            }
        }
    }
}

@media print {
    .Separator .separator__hr {
        top: 1.7em;
    }
}
